<template>
  <div class="mainframe" id="loginMain">
    <link type="text/css" href="">
    <div class="backFrame" id="loginPageFrame">

      <div id="loginFrame">
        <div>
          <p style="font-size: 30px">这里是logo</p>
        </div>
        <form ref="form">
          <div id="formdiv">
            <el-row>
              <el-col :span="24">
                <p align="left"> username or email address </p>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-input placeholder="请输入用户名或邮箱" v-model="Email"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <p align="left"> password</p>
              </el-col>
              <el-col :span="8">
                <p align="right">
                  <el-link :underline="false" type="primary">forget password</el-link>
                </p>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-input placeholder="请输入密码" v-model="Password" type="password"></el-input>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col :span="12">
                <el-button v-on:click="login">
                  登录
                </el-button>
              </el-col>

              <el-col :span="12">
                <el-button v-on:click="register">
                  注册
                </el-button>
              </el-col>
            </el-row>
          </div>

        </form>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "login",
  data() {
    return {
      Email: '',
      Password: ''
    }
  },
  methods: {
    async login() {
      // this.$http.get("?name=" + this.UserId + "&&pwd=" + this.Password)
      //     .then(response => {
      //       console.log(response.data)
      //     }).catch(e => console.log(e))
      /**
       * 发送Post请求登录，
       * body:{
       *   email:
       *   password:
       * }
       * result:{
       *   code:
       *   success:
       *   msg:
       *   data:token
       * }
       */
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.85)',
        fullscreen:true
      })
      this.$http.post('/api/login/user', {
        email: this.Email,
        password: this.Password
      })
          .catch(e =>
          {this.$alert("登录失败："+e)
           loading.close()
          })
          .then(response => {
            loading.close()
            console.log(response.data)
            var result = response.data
            var success = result.success
            if (success) {
              this.$message.success("登录成功，正在跳转...")
              this.$alert("登录成功")
              this.jumpTo('/homepage/n',3000)
              window.sessionStorage.setItem("token", result.data["token"])
            } else {
              var code = result.code
              var msg = result.msg
              this.$alert("登录失败：" + code + ":" + msg)
              this.Password = ''
            }
          })
    },
    register() {
      this.$router.push('/register')
    },
    async jumpTo(url,t){
      setTimeout(()=>{
        this.$router.push(url)
      },t)
    }

  }
}
</script>

<style scoped>
#loginMain {
  width: calc(100%);
  height: calc(100%);
  position: fixed;
}

#loginPageFrame {
  width: calc(100%);
  height: calc(100%);
  background: #fefefe center center no-repeat fixed;
  background-size: cover;

}

#formdiv {
  height: 250px;
  width: 400px !important;
  alignment: center;
  background: #2f2f2f;
  color: beige;
  padding: 20px;
  transform: translate(-50%);
  left: 50%;

  position: absolute;
  border-radius: 20px;

}

#loginFrame {
  position: absolute;
  height: 500px;
  width: 500px;
  left: 50%;
  transform: translate(-50%);
  top: calc(50% - 250px);
  margin: 0;
  alignment: center;
}
</style>
